// import React, { Component, createRef } from 'react'
// import { Modal, Form, Input, message, Upload, Radio } from 'antd'
// import { post } from '../../lib'
// import { FormTextItem } from '../../components/index'
// import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
// import styles from './index.module.css'

// export default class Detail extends Component {
//   // 创建一个form的引用
//   formRef = createRef()
//   state = {
//     visible: false, // 是否显示
//     record: null, // 传过来的值
//     isModify: false, // 是否是修改
//     imageUrl: '', //上传的图片地址
//   }
//   // 提供一个方法给父组件打开这个弹窗
//   show = (record) => {
//     // console.log(record);
//     this.setState({
//       visible: true,
//       record,
//       isModify: !!record, // 如果传了record，就是修改，否则就是新增
//       imageUrl:record.head
//     })
//   }
//   onSuccess = (res) => {
//     // 文件上传成功的回调
//     if (res.file.xhr) {
//       // 上传成功返回
//       const data = JSON.parse(res.file.xhr.responseText)
//       if (data.success) {
//         this.setState({ imageUrl: data.result.url }) // 设置图片地址
//       }
//     }
//   }
//   submit = async () => {
//     // 提交接口
//     const { record, isModify, imageUrl } = this.state
//     const { refreshList } = this.props // 父组件传下来的属性列表函数
//     const values = await this.formRef.current.validateFields().catch((e) => {})
//     if (!values) return
//     values.head = imageUrl //修正
//     // 如果是修改，需要设置id
//     let url = '/create/member'
//     if (isModify) {

//       values.id = record.id
//       url = '/modify/member'
//     }
//     const data = await post(url, values)
//     if (!data.success) {
//       return alert(data.message)
//     }
//     message.success(isModify ? '修改成功' : '新增成功')
//     // 刷新列表
//     refreshList && refreshList() // 先判断一下
//     this.setState({ visible: false })
//   }

//  onChange = (e) => {
//     console.log('radio checked', e.target.value);
//   };
//   render() {
//     const { visible, record, isModify, imageUrl } = this.state
//     return (
//       visible && ( // 直接刷新一下dom
//         <Modal
//           title={isModify ? '修改人员' : '新增人员'}
//           centered
//           open={visible}
//           onOk={this.submit}
//           onCancel={() => this.setState({ visible: false })}
//           width={800}
//         >
//           <Form
//             ref={this.formRef}
//             name='basic'
//             labelCol={{
//               span: 8,
//             }}
//             wrapperCol={{
//               span: 16,
//             }}
//             style={{
//               maxWidth: 600,
//             }}
//             initialValues={{
//               // 初始值
//               head:record?.head,
//               gender:record?.gender,
//               name: record?.name, // 修改传过来的初始值
//               phone: record?.phone,
//             }}
//             autoComplete='off'
//           >
//             {/* <Form.Item
//             label="姓名"
//             name="name" // 字段名称
//             rules={[
//               {
//                 required: true,
//                 message: '请输入你的姓名',
//               },
//             ]}
//           >
//             <Input />
//           </Form.Item> */}

//             <Form.Item label='头像' name='head'>
//               <Upload
//                 name='file'
//                 listType='picture-card'
//                 showUploadList={false}
//                 action='/api/upload'
//                 onChange={this.onSuccess}
//               >
//                 {imageUrl ? (
//                   <img className={styles.head1} src={imageUrl} />
//                 ) : (
//                   <PlusOutlined />
//                 )}
//               </Upload>
//             </Form.Item>

//             <FormTextItem label='姓名' name='name' type='name'></FormTextItem>

//             <Form.Item
//               label='手机号码'
//               name='phone' /* 字段名称 */
//               rules={[
//                 {
//                   required: true,
//                   message: '请输入手机号码',
//                 },
//               ]}
//             >
//               <Input />
//             </Form.Item>
//             <Form.Item
//               label='选择性别'
//               name='gender' /* 字段名称 */
//               rules={[
//                 {
//                   required: true,
//                 },
//               ]}
//             >
//               <Radio.Group onChange={this.onChange} >
//                 <Radio value='男'>男</Radio>
//                 <Radio value='女'>女</Radio>
//               </Radio.Group>
//             </Form.Item>
//           </Form>
//         </Modal>
//       )
//     )
//   }
// }
